<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻滚吧！代金券</title>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="address=no">
    <meta name="format-detection" content="email=no">
    <link rel="stylesheet" href="<?php echo C('STATIC_SHORT_URL');?>/mobile/css/common.css?v=1.0">
    <style>
        *{margin: 0}
        body,html{width:100%;height:100%;}
        #section{
            width: 100%;
            margin: 0 auto;
            overflow: hidden ;
        }
        #click,#click1{
            display: block;
            width: 64.67%;
            position: absolute ;
            top:4.9%;
            left:50%;
            transform: translate(-50%,0);
            -webkit-transform: translate(-50%,0);
        }
        .public{
            width:40%;
            height: 5.25rem  ;
            text-align: right;
            overflow: hidden;
            color:#ffe86a;
            font-size: 1rem;
            position: absolute ;
            right:10%;
        }
        .txt{top:18.77%; line-height: 6.5rem;  }
        #number{float: left;font-size: 2rem;font-weight: 600 ;color:#fae565;text-align: center;width: 88%; }
        .txt1{
            line-height: 5.25rem;
            bottom:16.77%;
        }
        #sum{float: left;font-size: 1.44rem;font-weight: 600 ;color:#fae565;text-align: center;width: 88%;}
        #top{width:100%;position:fixed ;height:100%;top:0;z-index: 10; background:rgba(0, 0, 0,0.3);}
        .img {
            width: 76.93%;
            position: relative ;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
        }
        #go{
            display: block ;
            width: 75.9%;
            position: absolute ;
            bottom: 0;
            left:50%;
            transform: translate(-50%,0);
            -webkit-transform: translate(-50%,0);
        }
        #coupon{
            width: 80%;
            position: absolute ;
            margin: 0 auto;
            top:48%;
            left:11.5%;
            animation:move 1s linear forwards;
            -webkit-animation:move 1s linear forwards ;
        }
        @keyframes move {
            0%{top:-50%;}
            30%{top:48%;transform: rotateZ(45deg)}
            40%{top:48%;transform: rotateZ(0deg)}
            50%{top:48%;transform: rotateZ(-45deg)}
            60%{top:48%;transform: rotateZ(0deg)}
            70%{top:48%;transform: rotateZ(20deg)}
            80%{top:48%;transform: rotateZ(0deg)}
            90%{top:48%;transform: rotateZ(-20deg)}
            100%{top:48%;transform: rotateZ(0deg) }
        }
        @-webkit-keyframes move {
            0%{top:-50%;}
            30%{top:48%;transform: rotateZ(45deg)}
            40%{top:48%;transform: rotateZ(0deg)}
            50%{top:48%;transform: rotateZ(-45deg)}
            60%{top:48%;transform: rotateZ(0deg)}
            70%{top:48%;transform: rotateZ(20deg)}
            80%{top:48%;transform: rotateZ(0deg)}
            90%{top:48%;transform: rotateZ(-20deg)}
            100%{top:48%;transform: rotateZ(0deg) }
        }
#message {
    position: fixed;
    width: 100%;
    top: 50%;
    text-align: center;
    color: #fff;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    z-index: 99999999;
    font-size: 0.8rem;
}
#message div {
    background: rgba(0,0,0,0.5);
    display: inline-block;
    text-align: center;
    padding: 0.5rem 1rem;
    border-radius: 0.1rem;
}
        #close {
            width:2rem;
            height: 2rem;
            position: absolute ;
            top: 0;
            right: 0;
            -webkit-transform: translate(50%,-50%);
            transform: translate(50%,-50%);
        }
    </style>
</head>
<body>
<!--弹窗：提醒去充值获取资格-->
<div id="top" style="display: none">
    <div class="img">
        <img src="__IMAGES__/activity/rollForCoupon/close.png" style="display: block ; " id="close">
        <img src="__IMAGES__/activity/rollForCoupon/6.png" style="width: 100%;display: block ; ">
        <a href="honglu://www.honglu.com/native?name=recharge&index=0&need_gg_login=1&type_code=XAG1" id="go">
            <img src="__IMAGES__/activity/rollForCoupon/go.png" style="width: 100%;display: block ; ">
        </a>
    </div>
</div>
<div id="section">
    <div style="position: relative;width: 100%; ">
        <img src="__IMAGES__/activity/rollForCoupon/111.jpg" style="width: 100%;display: block">
        <img src="__IMAGES__/activity/rollForCoupon/222.jpg" style="width: 100%;display: block">
        <div id="coupon">
            <img src="__IMAGES__/activity/rollForCoupon/coupon.png" style="display: block;width: 100%;" >
        </div>

    </div>
    <!--按钮状态-->
    <div style="position: relative;width: 100%; ">
        <img src="__IMAGES__/activity/rollForCoupon/33.jpg" style="width: 100%;display: block">
        <?php if($status){ ?>
        <img src="__IMAGES__/activity/rollForCoupon/success.png" id="click1" >
        <?php }else{ ?>
        <img src="__IMAGES__/activity/rollForCoupon/click.png" id="click">
        <?php } ?>
    </div>

    <!--数量统计:获得参与资格这部分显示-->
    <?php if($status){ ?>
    <div style="position: relative;width: 100%;"  id="show">
        <img src="__IMAGES__/activity/rollForCoupon/4.jpg" style="width: 100%;display: block">
        <div class="txt public">
            <p id="number"><?php echo $count;?></p>张
        </div>
        <div class="txt1 public" >
            <p id="sum"><?php echo $sum_money;?></p>元
        </div>
    </div>
    <?php } ?>
    <div style="position: relative;width: 100%; ">
        <img src="__IMAGES__/activity/rollForCoupon/5.jpg" style="width: 100%;display: block">
    </div>
</div>
<div id="message" style="display: none">
    <div></div>
</div>
<script type="text/javascript">
    // rem自适应代码
    (function (doc, win) {
        var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    docEl.style.fontSize = 16 * (clientWidth / 375) + 'px';
                };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script>
<script src="<?php echo C('STATIC_SHORT_URL');?>/mobile/js/jquery-1.7.1.js"></script>
<script>
    $(function(){
        $("#close").on('click',function(){
           $("#top").hide();
        })
    })
</script>
<script >
            $(function(){

                $('#top').height =$('#section').height();

console.log($('#section').height());
                var uid = <?php echo $uid;?>;
//                var isReady = <?php echo $status;?>;

//                if ( isReady == 1) {
//                    $("#show").show();
//                }

                $("#click").on("touchstart",function(){

//                    alert(1);
                       var url1 = "http://h5.518yin.com/h5/Activity/joinRollIt";
//                      var url1 = "http://yzg.zhouxushun.cn/index.php/h5/Activity/joinRollIt"

                        $.ajax({
                            type: 'get',
                            url: url1+"?u_userid="+uid,
                            dataType: 'json',
                            timeout: 6000,
                            success: function(data) {
                                console.log(data)
                                //数据传递验证成功后执行的操作
                                if (data.code == 200) {
//                                     alert(2);
                                    $("#click").attr("src","__IMAGES__/activity/rollForCoupon/success.png");
//                                   $("#message div").html("参与成功").parent().show();
//                                    setTimeout(function() {
//                                        $("#message").hide();
//                                    }, 1000)
                                   location.reload();
                                }else if(data.code == 209){
                                    $("#top").show();
                                    setTimeout(function() {
                                        $("#top").hide();
                                    }, 6000)
                                }else{
                                    $("#message div").html(data.msg).parent().show();
                                    setTimeout(function() {
                                        $("#message").hide();
                                    }, 1000)
                                }
                            },
                        });
                })
                //弹窗关闭事件
                $("#tc .close").on("touchstart",function(){
                    $(this).parents("#tc").hide();
                })     
            })
        </script>
</body>
</html>